<template>
    <footer class="border-t border-gray-300 bg-white">
        <div class="mx-auto max-w-7xl px-6 py-12">
            <div class="flex flex-col items-center justify-between md:flex-row">
                <div class="mb-6 md:mb-0">
                    <!-- <a href="#" class="text-2xl font-light"></a> -->
                    <img src="@/assets/logo-s.png" class="h-10" alt="logo" /><span class="text-xl font-bold"></span>
                    <p class="mt-2 text-sm font-light text-gray-500">发现与分享每天的新鲜事</p>
                </div>
                <div class="flex flex-col gap-8 sm:flex-row sm:items-center">
                    <div class="flex space-x-6">
                        <a href="#" class="text-gray-500 transition-colors hover:text-gray-800">
                            <!-- <i class="fab fa-instagram"></i> -->
                            <Icon icon="fa7-brands:tiktok" />
                        </a>
                        <a href="#" class="text-gray-500 transition-colors hover:text-gray-800">
                            <Icon icon="fa7-brands:weibo"
                        /></a>
                        <a href="#" class="text-gray-500 transition-colors hover:text-gray-800">
                            <Icon icon="fa7-brands:500px" />
                        </a>
                    </div>
                    <div class="text-sm font-light text-gray-500">&copy; 2025 今日头条. 保留所有权利.</div>
                </div>
            </div>
        </div>
    </footer>
</template>

<script setup lang="ts">
import { Icon } from "@iconify/vue";
</script>

<style scoped lang="scss"></style>
